<!--
 * @description 分数排行榜组件
 * @date 2022/11/12
 -->
<template>
  <div class="score-rank-style-one-comp" :style="{ 'margin-top': top }">
    <div class="top-bg">
      <img
        v-if="linkData.rankingListImgId && linkData.rankingListImgId !== ''"
        :src="
          setImgPath(linkData.rankingListImgId, linkData.rankingListImgIdUrl)
        "
        alt=""
      >
      <img v-else src="./images/rank-default.png" alt="">
    </div>
    <div
      class="rank-list-box"
      :style="{
        height: 'calc(100vh - ' +px2rem(286) + ' - ' +(headerHeight() || '0px') + ')',
        'padding-left':
          px2rem(option.rankPaddingLeftRight) == 0
            ? '0'
            : px2rem(option.rankPaddingLeftRight),
        'padding-right':
          px2rem(option.rankPaddingLeftRight) == 0
            ? '0'
            : px2rem(option.rankPaddingLeftRight),
      }"
    >
      <div v-if="myrank" class="my-rank-box">
        <img
          v-if="myrank.imgIdUrl"
          class="my-rank-bg"
          :src="setImgPath(myrank.imgId, myrank.imgIdUrl)"
          alt=""
        >
        <img v-else class="my-rank-bg" src="./images/my-rank.png" alt="">
        <div class="my-rank">
          <div class="num din-front">
            <template v-if="labelObj !== undefined">
              <label-comp
                v-if="myArr.length > 0 && myArr[0] && myArr[0].rank < 4"
                :label-list="myArr[0].labelList"
              />
            </template>
            <template v-else>
              <img
                v-if="myrank.rank == 1"
                class="rank-img"
                src="./images/first.png"
                alt=""
              >
              <img
                v-if="myrank.rank == 2"
                class="rank-img"
                src="./images/second.png"
                alt=""
              >
              <img
                v-if="myrank.rank == 3"
                class="rank-img"
                src="./images/third.png"
                alt=""
              >
            </template>
            <span v-if="myrank.rank > 3">{{
              myrank.rank > 1000000 ? '1000000+' : myrank.rank
            }}</span>
            <span v-else-if="myrank.rank === 0" class="din-front">--</span>
          </div>
          <div class="name">
            <van-image
              class="header-img"
              :src="setImgPath(myrank.userView, myrank.userViewUrl)"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="./images/ic_default_portrait.png" alt>
              </template>
            </van-image>
            <div class="text">
              {{ getName(myrank.userRealName || '') }}
              <span class="phone">{{
                getPhone(myrank.phoneNumber || '')
              }}</span>
            </div>
          </div>
          <div class="time">{{ getS(myrank.totalDuration || '') }}</div>
          <div class="score din-front">{{ myrank.scoreTotal | toDecimal }}</div>
        </div>
      </div>

      <div class="rank-title">
        <div class="num">排名</div>
        <div class="rank-name">头像/名称</div>
        <div class="rank-time">用时</div>
        <div class="score">分数</div>
      </div>
      <div class="rank-list">
        <empty-page v-if="isNoData" :empty-type="0" />
        <empty-page v-if="isLoadError" :empty-type="1" />
        <van-pull-refresh
          id="rushIndex"
          v-model="isLoading"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            :immediate-check="false"
            :offset="20"
            @load="onLoad"
          >
            <div v-for="(item, i) in list" :key="i" class="list-item">
              <div class="num din-front">
                <template v-if="labelObj !== undefined">
                  <label-comp
                    v-if="item.rank < 4 && item.labelList"
                    :label-list="item.labelList"
                  />
                </template>
                <template v-else>
                  <img
                    v-if="item.rank == 1"
                    class="rank-img"
                    src="./images/first.png"
                    alt=""
                  >
                  <img
                    v-if="item.rank == 2"
                    class="rank-img"
                    src="./images/second.png"
                    alt=""
                  >
                  <img
                    v-if="item.rank == 3"
                    class="rank-img"
                    src="./images/third.png"
                    alt=""
                  >
                </template>

                <span v-if="item.rank > 3">{{
                  item.rank > 1000000 ? '1000000+' : item.rank
                }}</span>
              </div>
              <div class="name">
                <van-image
                  class="header-img"
                  :src="setImgPath(item.userView, item.userViewUrl)"
                >
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="./images/ic_default_portrait.png" alt>
                  </template>
                </van-image>
                <div class="text">
                  {{ getName(item.userRealName || '') }}
                  <span class="phone">{{
                    getPhone(item.phoneNumber || '')
                  }}</span>
                </div>
              </div>
              <div class="time">{{ getS(item.totalDuration || '') }}</div>
              <div class="score din-front">
                {{ item.scoreTotal | toDecimal }}
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
import CryptoJS from '@/utils/aesJiaJM'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'
export default {
  name: 'ScoreRankStyleOneComp',
  filters: {
    toDecimal(num) {
      if (+num > 10000) {
        var s = (num / 10000).toString()
        let numList = []
        let str = ''
        if (s.indexOf('.') !== -1) {
          numList = s.split('.')
        } else {
          numList.push(s)
        }
        if (numList.length > 0) {
          if (numList.length === 1) {
            str = numList[0] + 'w'
          } else {
            for (let i = 0; i < numList.length; i++) {
              if (i === 0) {
                str = numList[0] + '.'
              }
              if (i === 1) {
                if (numList[i].length >= 2) {
                  const numLength = numList[i].length

                  str += numList[i].substring(0, 2)
                  if (
                    numLength > 2 &&
										parseFloat(numList[i].substring(2, numLength)) >= 1
                  ) {
                    str += 'w+'
                  } else {
                    str += 'w'
                  }
                } else {
                  str += numList[i]
                  if (parseFloat(numList[i]) >= 1) {
                    str += 'w+'
                  } else {
                    str += 'w'
                  }
                }
              }
            }
          }
        }
        return str
      } else {
        return num
      }
    }
  },
  components: { LabelComp },
  mixins: [mixins],
  inject: ['headerHeight'],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: '',
      rushQuestionId: '',
      rankLimitNum: '',
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isNoData: false,
      isLoadError: false,
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [], // 列表数据
      defaultList: [
        {
          userView: '',
          userViewUrl:	'',
          userRealName: '李冲',
          scoreTotal: 13088,
          rank: 1,
          totalDuration: '00:06'
        },
        {
          userView: '',
          userViewUrl: '',
          userRealName: '王雪芬',
          scoreTotal: 9999,
          rank: 2,
          totalDuration: '00:06'
        },
        {
          userView: '',
          userViewUrl: '',
          userRealName: '李学强',
          scoreTotal: 120,
          rank: 3,
          totalDuration: '00:06'
        }
      ],
      defaultMyData: {
        userView: '',
        userViewUrl: '',
        userRealName: '李冲',
        scoreTotal: 13088,
        rank: 1,
        totalDuration: '00:06'
      },
      myrank: {},
      page: 1,
      linkData: {},
      defaultLinkData: {
        rankLimitNum: '',
        rankingListImgId: '220930a2897eb9e110484aac8ccdc36b4255fb.jpeg',
        rankingListImgIdUrl:
					'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/09/30/220930a2897eb9e110484aac8ccdc36b4255fb.jpeg'
      },
      labelObj: undefined,
      myArr: []
    }
  },
  created() {
    if (this.isInitData) {
      this.seflLoadData()
    } else {
      this.finished = true
      this.linkData = this.defaultLinkData
      this.list = this.defaultList
      this.myrank = this.defaultMyData
    }
  },
  methods: {
    setData(result) {
      if (result.rushInfo) {
        this.linkData = result.rushInfo.data
        this.rushQuestionId = result.rushInfo.data.id
        this.rankLimitNum = result.rushInfo.data.rankLimitNum || '50'
      } else {
        const res = result.dataList
        const { rows, total } = res.data || {}
        this.list.push(...rows)
        if (this.page === 1) {
          this.myrank = res.data.my
        }
        this.loading = false
        this.isLoading = false
        this.isNoData = total < 1
        if (this.isNoData) {
          this.finishedText = ''
        } else {
          this.finishedText = '已经到底了'
        }
        if (this.list.length >= total) {
          this.finished = true
        } else {
          this.finished = false
        }
        if (this.labelObj !== undefined) {
          this.setLabel(this.list, 'list')
          this.myArr = []
          if (this.myrank !== undefined) {
            this.myArr.push(this.myrank)
            this.setLabel(this.myArr, 'myArr')
          }
        }
      }
    },
    /**
		 * 大于5个字省略号
		 */
    getName(n) {
      return n.length > 5 ? n.substring(0, 5) + '...' : n
    },
    /**
		 * 解密手机号
		 */
    getPhone(p) {
      return p ? CryptoJS.$aesJieM(p) : ''
    },
    /**
		 * 获取秒
		 * */
    getS(n) {
      return n
    },
    /**
		 * 刷新
		 */
    onRefresh() {
      return new Promise((resolve, reject) => {
        this.finished = false
        this.page = 1
        this.list = []
        this.seflLoadData()
        reject()
      })
    },
    /**
		 * 上拉加载
		 */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.seflLoadData()
      } else {
        this.loading = false
      }
    },
    /**
		 * 加载数据
		 */
    async seflLoadData() {
      this.labelObj = await this.getLabelList()
      console.log('labelObj', this.labelObj['PHB'])
      await this.getDataByCode('rushInfo')
      await this.getDataByCode('dataList')
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.score-rank-style-one-comp {
	.top-bg {
		height: rem(316);
		> img {
			height: 100%;
			width: 100%;
		}
	}
	.rank-list-box {
		position: relative;
		margin-top: rem(-30);
		background: #fff;
		border-radius: rem(32) rem(32) 0 0;
		padding: rem(30) rem(10);
		display: flex;
		flex-direction: column;
		.my-rank-box {
			height: rem(140);
			position: relative;
			.my-rank-bg {
				height: 100%;
				width: 100%;
			}
			.my-rank {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				height: rem(140);
				padding: 0 rem(20);
				display: flex;
				align-items: center;

				.num {
					width: rem(126);
					font-size: rem(34);
					font-weight: bold;
					text-align: center;
					color: #262628;

					.rank-img {
						width: rem(50);
						height: rem(50);
					}
				}

				.name {
					width: 0;
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;

					.header-img {
						height: rem(74);
						width: rem(74);
						border-radius: 50%;
						overflow: hidden;

						.van-image__error {
							height: rem(74);
							width: rem(74);
							border-radius: 50%;
						}

						img {
							height: rem(74);
							width: rem(74);
							border-radius: 50%;
						}
					}

					.text {
						flex: 1;
						width: 0;
						margin-left: rem(20);
						font-size: rem(32);
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: bold;
						color: #262628;

						.phone {
							margin-top: rem(15);
							font-size: rem(24);
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #999999;
						}
					}
				}

				.time {
					width: rem(170);
					font-size: rem(32);
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: bold;
					text-align: left;
					color: #666666;
				}

				.score {
					width: rem(110);
					font-size: rem(36);
					font-weight: 700;
					color: #333333;
					text-align: center;
				}
			}
		}

		.rank-title {
			margin-top: rem(26);
			padding: 0 rem(20);
			display: flex;
			font-size: rem(30);
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #999999;

			.num {
				width: rem(126);
				text-align: center;
			}

			.rank-name {
				flex: 1;
				text-align: left;
			}

			.rank-time {
				width: rem(170);
				text-align: left;
			}

			.score {
				width: rem(110);
				text-align: center;
			}
		}

		.rank-list {
			flex: 1;
			position: relative;
			scrollbar-width: none; /* firefox */
			-ms-overflow-style: none; /* IE 10+ */
			::-webkit-scrollbar {
				width: 0; /* Safari,Chrome 隐藏滚动条 */
				height: 0; /* Safari,Chrome 隐藏滚动条 */
				display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
			}
			.van-pull-refresh {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
				padding-top: rem(47);

				.list-item {
					height: rem(140);
					margin-bottom: rem(0);
					padding: 0 rem(20);
					display: flex;
					align-items: center;

					.num {
						width: rem(126);
						font-size: rem(34);
						font-weight: bold;
						text-align: center;
						color: #262628;

						.rank-img {
							width: rem(50);
							height: rem(50);
						}
					}

					.name {
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						align-items: center;

						.header-img {
							height: rem(74);
							width: rem(74);
							border-radius: 50%;
							overflow: hidden;
							.van-image__error {
								height: rem(74);
								width: rem(74);
							}

							img {
								height: rem(74);
								width: rem(74);
							}
						}

						.text {
							width: 0;
							flex: 1;
							margin-left: rem(20);
							font-size: rem(32);
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: bold;
							color: #262628;

							.phone {
								margin-top: rem(15);
								font-size: rem(24);
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #999999;
							}
						}
					}

					.time {
						width: rem(170);
						font-size: rem(32);
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: bold;
						text-align: left;
						color: #666666;
					}

					.score {
						width: rem(110);
						font-size: rem(36);
						font-weight: 700;
						color: #f63632;
						text-align: center;
					}
				}
			}
		}
	}
}
</style>
